<template>
  <div class="animated-element" :class="{ 'animate': animate }" @mouseenter="startAnimation" @mouseleave="stopAnimation">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'AnimatedElement',
  data() {
    return {
      animate: false
    }
  },
  methods: {
    startAnimation() {
      this.animate = true
    },
    stopAnimation() {
      this.animate = false
    }
  }
}
</script>

<style scoped>
.animated-element {
  transition: all 0.5s ease;
}

.animated-element.animate {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.4);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(211, 47, 47, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(211, 47, 47, 0);
  }
}
</style>